<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>About Us</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/pe-icons.css" rel="stylesheet">
    <link href="css/prettyPhoto.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/mycss.css" rel="stylesheet">
    <link rel="stylesheet" href="layui/css/layui.css">
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
    <script src="js/jquery.js"></script>
    <link rel="shortcut icon" href="images/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="images/ico/apple-touch-icon-144x144.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/ico/apple-touch-icon-114x114.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/ico/images/ico/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon-precomposed" href="images/ico/apple-touch-icon-57x57.png">

</head><!--/head-->
<body>
<div id="preloader"></div>
<div th:replace="index :: header"></div>

<section id="single-page-slider" class="no-margin">
    <div class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="item active">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="center gap fade-down section-heading">
                                <h2 class="main-title"th:text="${hotelItemSpu.getHotelItemSpuName()}"></h2>
                                <hr>
                                联系电话: <span th:text="${hotelItemSpu.getHotelItemSpuTel()}"></span><br>
                                酒店地址: <span th:text="${hotelItemSpu.getHotelItemSpuAdress()}"></span><br>
                                酒店类型: <span th:text="${hotelItemSpu.getCategorizationInformationName()}"></span><br>
                                酒店评分: <span th:text="${hotelItemSpu.getHotelItemSpuScore()}"></span>星
                            </div>
                        </div>
                    </div>
                </div>
            </div><!--/.item-->
        </div><!--/.carousel-inner-->
    </div><!--/.carousel-->
</section><!--/#main-slider-->

<div id="content-wrapper">
    <section id="blog" class="white">
        <div class="container">
            <div class="row" th:utext="${hotelItemSpu.getHotelItemSpuContent()}">
            </div><!--/.row-->
            <h1>图片欣赏</h1>
            <div class="layui-carousel" id="test1" lay-filter="test1" style="margin: 0 auto">
                <div carousel-item="">
                    <div  th:each="imag,imagState:${hotelItemSpu.getImags()}"><img th:src="${imag.getHotelItemImagUrl()}"></div>
                </div>
            </div>
        </div>
    </section><!--/#blog-->
</div>
<input type="hidden" id="images" th:value="${imagesJSON}">
<div th:replace="information :: Pagefoot"></div>


<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.prettyPhoto.js"></script>
<script src="js/plugins.js"></script>
<script src="js/init.js"></script>
<script src="js/common.js"></script>
<script src="layui/layui.js"></script>

<script>

    $(function () {
       initBodyBgc();
       initLayui();
    })

    function initBodyBgc() {
        var imagsJson = $("#images").val();
        var imagsObject = JSON.parse(imagsJson);
        console.log(imagsObject.length);
        //这里我们默认使用三个吧；
        var imagLength = imagsObject.length;
        var imag1,imag2,imag3;
        if (imagLength >= 3){
            imag1 = imagsObject[0].hotelItemImagUrl;
            imag2 = imagsObject[1].hotelItemImagUrl;
            imag3 = imagsObject[2].hotelItemImagUrl;
        }else if (imagLength == 2){
            imag1 = imagsObject[0].hotelItemImagUrl;
            imag2 = imagsObject[1].hotelItemImagUrl;
            imag3 = "images/bg/bg3.jpg";
        } else if(imagLength == 1){
            imag1 = imagsObject[0].hotelItemImagUrl;
            imag2 = "images/bg/bg2.jpg";
            imag3 = "images/bg/bg3.jpg"
        }else {
            imag1 = "images/bg/bg1.jpg";
            imag2 = "images/bg/bg2.jpg";
            imag3 = "images/bg/bg3.jpg"
        }

        console.log(imag1);
        console.log(imag2);
        console.log(imag3);

        jQuery('body').backstretch([
            imag1,imag2,imag3
        ], {duration: 5000, fade: 500});
    }

    function initLayui() {
        //JavaScript代码区域
        layui.use('element', function () {
            var element = layui.element;

        });
        layui.use(['carousel', 'form'], function () {
            var carousel = layui.carousel
                , form = layui.form;

            //常规轮播
            carousel.render({
                elem: '#test1'
                , width: '80%' //设置容器宽度
                , height: '500px'
                , arrow: 'always'
                ,interval: 4000
                //,anim: 'updown' //切换动画方式
            });
        });

    }
</script>

</body>
</html>
